<template>
	<view class="page-container">
		<!-- 搜索区域 -->
		<view class="search-section">
			<view class="search-box">
				<uni-icons type="search" size="20" color="#666"></uni-icons>
				<input type="text" v-model="searchText" placeholder="搜索单据编号或客户名称" />
			</view>
			<view class="filter-btn" @click="showFilterPanel">
				<uni-icons type="list" size="24" color="#333"></uni-icons>
			</view>
		</view>
		<!-- 筛选标签区 -->
		<scroll-view class="filter-tags" scroll-x>
			<view class="tag" v-if="dateRange.length">
				<text>日期：{{ dateRange[0] }} 至 {{ dateRange[1] }}</text>
				<uni-icons type="close" size="12" color="#666" @click="clearDateRange"></uni-icons>
			</view>
			<view class="tag" v-if="selectedCustomer">
				<text>客户：{{ selectedCustomer }}</text>
				<uni-icons type="close" size="12" color="#666" @click="clearCustomer"></uni-icons>
			</view>
			<view class="tag" v-if="sortType">
				<text>金额：{{ sortType === 'asc' ? '从低到高' : '从高到低' }}</text>
				<uni-icons type="close" size="12" color="#666" @click="clearSort"></uni-icons>
			</view>
		</scroll-view>
		<!-- 订单列表 -->
		<scroll-view class="order-list" scroll-y @scrolltolower="loadMore">
			<view class="order-card" v-for="order in orderList" :key="order.id" @click="toggleOrderDetail(order.id)">
				<view class="card-header">
					<text class="customer-name">{{ order.partnerName }}</text>
					<text class="order-amount">¥{{ order.billAmount }}</text>
				</view>
				<view class="card-content">
					<view class="order-info">
						<view class="order-number">
							<text class="label">单据编号：</text>
							<text>{{ order.billNo }}</text>
						</view>
						<uni-icons v-if="expandedOrderId !== order.id" type="bottom" size="16" color="#999"
							class="expand-icon" />
						<uni-icons v-else type="top" size="16" color="#999" class="expand-icon" />
					</view>
					<view class="order-details" v-show="expandedOrderId === order.id">
						<view class="detail-item" v-for="(item, index) in order.items" :key="index">
							<text class="detail-name">{{ item.title }}</text>
							<view class="detail-info">
								<text class="detail-quantity">x{{ item.num }}</text>
								<text class="detail-price">¥{{ item.itemAmount }}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="card-footer">
					<text class="order-time">{{ order.orderTime }}</text>
					<text :class="['order-status', `status-${order.status}`]">{{ order.statusText }}</text>
				</view> -->
			</view>
			<uni-load-more :status="loadMoreStatus"></uni-load-more>
		</scroll-view>
		<!-- 新增按钮 -->
		<view class="add-btn">
			<uni-icons type="plus" size="24" color="#fff" @click="addNewOrder"></uni-icons>
		</view>
		<!-- 筛选面板 -->
		<uni-popup ref="filterPopup" type="bottom">
			<view class="filter-panel">
				<view class="filter-header">
					<text>筛选条件</text>
					<uni-icons type="close" size="24" color="#333" @click="hideFilterPanel"></uni-icons>
				</view>
				<view class="filter-content">
					<view class="filter-item">
						<text class="filter-label">日期范围</text>
						<view class="date-picker">
							<uni-datetime-picker v-model="dateRange" type="daterange"></uni-datetime-picker>
						</view>
					</view>
					<view class="filter-item">
						<text class="filter-label">客户名称</text>
						<input type="text" v-model="selectedCustomer" placeholder="请输入客户名称" />
					</view>
					<view class="filter-item">
						<text class="filter-label">金额排序</text>
						<view class="sort-buttons">
							<button :class="['sort-btn', sortType === 'asc' ? 'active' : '']"
								@click="setSortType('asc')">从低到高</button>
							<button :class="['sort-btn', sortType === 'desc' ? 'active' : '']"
								@click="setSortType('desc')">从高到低</button>
						</view>
					</view>
				</view>
				<view class="filter-footer">
					<button class="reset-btn" @click="resetFilter">重置</button>
					<button class="confirm-btn" @click="applyFilter">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script lang="ts" setup>
	import { ref } from 'vue';
	import saleBill from '@/api/bill/sale';
	import { onLoad } from '@dcloudio/uni-app';
	const searchText = ref('');
	const dateRange = ref<string[]>([]);
	const selectedCustomer = ref('');
	const sortType = ref('');
	const expandedOrderId = ref('');
	const loadMoreStatus = ref<'more' | 'loading' | 'noMore'>('more');

	// 模拟订单数据
	let orderList = ref([
		{
			id: '1',
			partnerName: '上海某某科技有限公司',
			createTime: '2024-01-20 14:30',
			billNo: 'DD20240120001',
			billAmount: 12800,
			//status: 'pending',
			//statusText: '待审核',
			items: [
				{ title: '产品A', num: 2, itemAmount: 5600 },
				{ title: '产品B', num: 1, itemAmount: 1600 }
			]
		},
		{
			id: '2',
			partnerName: '北京某某贸易有限公司',
			createTime: '2024-01-19 16:45',
			billNo: 'DD20240119002',
			billAmount: 9600,
			//status: 'approved',
			//statusText: '已审核',
			items: [
				{ title: '产品C', num: 3, itemAmount: 3200 }
			]
		}
	]);
	const filterPopup = ref();

	async function getBillPageWithItems(pageNo, pageSize) {
		const parameter = {
			current: pageNo,
			size: pageSize
		}
		let res = await saleBill.pageWithItems(parameter);
		orderList = res?.records;
		//return orderList;
	}
	onLoad(() => {
		  getBillPageWithItems(1, 10);
		//console.log("resData:",resData)
	});

	const showFilterPanel = () => {
		filterPopup.value.open();
	};
	const hideFilterPanel = () => {
		filterPopup.value.close();
	};
	const toggleOrderDetail = (orderId : string) => {
		expandedOrderId.value = expandedOrderId.value === orderId ? '' : orderId;
	};
	const clearDateRange = () => {
		dateRange.value = [];
	};
	const clearCustomer = () => {
		selectedCustomer.value = '';
	};
	const clearSort = () => {
		sortType.value = '';
	};
	const setSortType = (type : string) => {
		sortType.value = type;
	};
	const resetFilter = () => {
		dateRange.value = [];
		selectedCustomer.value = '';
		sortType.value = '';
	};
	const applyFilter = () => {
		hideFilterPanel();
		// 实际应用中这里需要调用接口重新获取数据
	};
	const loadMore = () => {
		loadMoreStatus.value = 'loading';
		// 模拟加载更多数据
		setTimeout(() => {
			loadMoreStatus.value = 'noMore';
		}, 1000);
	};
	const addNewOrder = () => {
		// 实现新增单据逻辑
	};
</script>
<style>
	page {
		height: 100%;
	}

	.page-container {
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
	}

	.search-section {
		padding: 20rpx 30rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		position: relative;
		flex-shrink: 0;
	}

	.search-box {
		flex: 1;
		height: 72rpx;
		background-color: #f5f5f5;
		border-radius: 36rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
	}

	.search-box input {
		flex: 1;
		height: 72rpx;
		margin-left: 20rpx;
		font-size: 14px;
	}

	.filter-btn {
		margin-left: 20rpx;
		width: 72rpx;
		height: 72rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.filter-tags {
		padding: 20rpx 30rpx;
		white-space: nowrap;
		background-color: #fff;
		flex-shrink: 0;
	}

	.tag {
		display: inline-flex;
		align-items: center;
		background-color: #f0f0f0;
		padding: 10rpx 20rpx;
		border-radius: 24rpx;
		margin-right: 20rpx;
		font-size: 12px;
	}

	.tag text {
		margin-right: 10rpx;
	}

	.order-list {
		flex: 1;
		padding: 20rpx 30rpx;
		overflow: auto;
	}

	.order-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
		padding-bottom: 24rpx;
		border-bottom: 2rpx solid #f5f5f5;
	}

	.customer-name {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		max-width: 70%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.order-time {
		font-size: 12px;
		color: #999;
	}

	.card-content {
		margin-bottom: 24rpx;
	}

	.order-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.order-number {
		font-size: 14px;
		color: #666;
		flex: 1;
	}

	.expand-icon {
		padding: 10rpx;
	}

	.label {
		color: #999;
		margin-right: 8rpx;
	}

	.order-details {
		margin-top: 24rpx;
		padding: 20rpx;
		background-color: #f9f9f9;
		border-radius: 12rpx;
	}

	.detail-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
		font-size: 14px;
		color: #666;
	}

	.detail-item:last-child {
		margin-bottom: 0;
	}

	.detail-name {
		flex: 1;
		padding-right: 20rpx;
	}

	.detail-info {
		display: flex;
		align-items: center;
	}

	.detail-quantity {
		color: #999;
		margin-right: 20rpx;
	}

	.detail-price {
		min-width: 120rpx;
		text-align: right;
		color: #333;
	}

	.card-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 24rpx;
		border-top: 2rpx solid #f5f5f5;
	}

	.order-amount {
		font-size: 18px;
		font-weight: bold;
		color: #ff6b6b;
	}

	.order-status {
		padding: 6rpx 20rpx;
		border-radius: 20rpx;
		font-size: 12px;
	}

	.status-pending {
		background-color: #fff7e6;
		color: #ffa940;
	}

	.status-approved {
		background-color: #e6fffb;
		color: #13c2c2;
	}

	.add-btn {
		position: fixed;
		right: 40rpx;
		bottom: 40rpx;
		width: 100rpx;
		height: 100rpx;
		background-color: #1890ff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
	}

	.filter-panel {
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
		padding: 30rpx;
	}

	.filter-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.filter-header text {
		font-size: 16px;
		font-weight: bold;
	}

	.filter-item {
		margin-bottom: 30rpx;
	}

	.filter-label {
		display: block;
		margin-bottom: 20rpx;
		font-size: 14px;
		color: #666;
	}

	.date-picker {
		width: 100%;
	}

	.sort-buttons {
		display: flex;
		gap: 20rpx;
	}

	.sort-btn {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border: 2rpx solid #ddd;
		border-radius: 40rpx;
		font-size: 14px;
		background-color: #fff;
	}

	.sort-btn.active {
		background-color: #1890ff;
		color: #fff;
		border-color: #1890ff;
	}

	.filter-footer {
		margin-top: 40rpx;
		display: flex;
		gap: 20rpx;
	}

	.reset-btn,
	.confirm-btn {
		flex: 1;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		border-radius: 44rpx;
		font-size: 16px;
	}

	.reset-btn {
		background-color: #f5f5f5;
		color: #666;
	}

	.confirm-btn {
		background-color: #1890ff;
		color: #fff;
	}
</style>